// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity, ImageBackground, ScrollView, TextInput, InteractionManager, Modal } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import { Actions } from 'react-native-router-flux';

// antd 按需加载
import { InputItem, Tabs, Toast, Portal, List, Picker } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { region } from '../../module/module.js'

// 引入样式
import Styles from './style.js';

// 引入公用组件
import { Radio, Distpicker } from '../../components/index.js'

// 引入工具包
import { press, size, ScreenWidth, ScreenHeight, borderBottom, hotTextColor, validation, defaultDataList, onEndReached, onRefresh, concatDataList, defaultPage } from '../../util/utils.js'

class AddressForm extends Component {

	constructor(props) {
		super(props)
		this.state = {
			provinceId: '',
			provinceName: '',
			cityId: '',
			cityName: '',
			areaId: '',
			areaName: '',
			townId: '',
			townName: '',
			isDefault: false,
			consignee: '',
			phone: '',
			detailAddress: '',
			visible: false,
			selectModal: 0
		}
	}


	componentDidMount() {
	}

	componentWillReceiveProps(nextProps) {
		if (nextProps.details) {
			this.setState({
				provinceId: nextProps.details.provinceId,
				provinceName: nextProps.details.provinceName,
				cityId: nextProps.details.cityId,
				cityName: nextProps.details.cityName,
				areaId: nextProps.details.areaId,
				areaName: nextProps.details.areaName,
				townId: nextProps.details.townId,
				townName: nextProps.details.townName,
				isDefault: nextProps.details.isDefault,
				consignee: nextProps.details.consignee,
				phone: nextProps.details.phone,
				detailAddress: nextProps.details.detailAddress,
			})
		}
	}

	// 新增收货地址 /delivery/address/insert
	hanfleOnPress() {
		const { onPress } = this.props
		const { provinceName, cityName, areaName, townName, provinceId, cityId, areaId, townId, isDefault, detailAddress, consignee, phone } = this.state
		if (!provinceId) {
			Toast.info('请选择省份', 1, null, false);
			return
		}
		if (!cityId) {
			Toast.info('请选择市', 1, null, false);
			return
		}
		if (!areaId) {
			Toast.info('请选择区', 1, null, false);
			return
		}
		if (!townId) {
			Toast.info('请选择乡镇', 1, null, false);
			return
		}
		if (!detailAddress) {
			Toast.info('请填写详细地址', 1, null, false);
			return
		}
		if (!consignee) {
			Toast.info('请输入联系人姓名', 1, null, false);
			return
		}
		if (!phone) {
			Toast.info('请输入手机号', 1, null, false);
			return
		}
		// if (!validation.phone(phone)) {
		// 	Toast.info('请输入9-11位手机号', 1, null, false);
		// 	return;
		// }
		onPress({
			areaId,
			areaName,
			cityId,
			cityName,
			consignee,
			detailAddress,
			isDefault: isDefault ? 1 : 0,
			phone,
			provinceId,
			provinceName,
			townId,
			townName
		})
	}



	pickAddress() {
		this.setState({
			visible: true
		})
	}


	onClose = () => {
		this.setState({
			visible: false
		})
	}

	render() {
		const { province, visible, selectModal, city, area, town, provinceId, cityId, areaId, townId, provinceName, cityName, areaName, townName, isDefault, consignee, phone, detailAddress } = this.state
		return (
			<ScrollView style={{ flex: 1, paddingBottom: 20 }}>
				<View style={{ paddingLeft: 15 }}>
					<TextInput
						onChangeText={(value) => this.setState({ consignee: value })}
						placeholder="姓名"
						value={consignee}
						placeholderTextColor="#61676F"
						style={{
							paddingTop: 15,
							paddingBottom: 15,
							padding: 0,
							paddingRight: 15,
							color: '#333',
							fontSize: 14,
							...borderBottom()
						}}
						underlineColorAndroid="transparent"
					/>
					<TextInput
						onChangeText={(value) => this.setState({ phone: value })}
						keyboardType="numeric"
						placeholder="手机号码"
						value={phone}
						placeholderTextColor="#61676F"
						style={{
							paddingTop: 15,
							paddingBottom: 15,
							paddingRight: 15,
							color: '#333',
							fontSize: 14,
							...borderBottom()
						}}
						underlineColorAndroid="transparent"
					/>
					<Distpicker
						details={{
							provinceId,
							provinceName,
							cityId,
							cityName,
							areaId,
							areaName,
							townId,
							townName,
						}}
						onPress={(address) => {
							this.setState({
								provinceId: address.provinceId,
								provinceName: address.provinceName,
								cityId: address.cityId,
								cityName: address.cityName,
								areaId: address.areaId,
								areaName: address.areaName,
								townId: address.townId,
								townName: address.townName,
							})
						}}
					/>
					<TextInput
						onChangeText={(value) => this.setState({ detailAddress: value })}
						placeholder="请填写详细地址"
						value={detailAddress}
						placeholderTextColor="#61676F"
						style={{
							paddingTop: 15,
							paddingBottom: 15,
							padding: 0,
							paddingRight: 15,
							color: '#333',
							fontSize: 14,
							...borderBottom()
						}}
						underlineColorAndroid="transparent"
					/>
					<View style={{ height: 50, justifyContent: 'center', }}>
						<Radio
							style={{}}
							checked={isDefault}
							onChange={(value) => {
								this.setState({
									isDefault: value
								})
							}}
							label={'设为默认地址'}
						/>
					</View>
				</View>
				<View style={{ padding: 15, backgroundColor: '#fff' }}>
					<TouchableOpacity
						onPress={() => {
							this.hanfleOnPress()
						}}
						style={{
							paddingVertical: 14,
							paddingHorizontal: 20,
							backgroundColor: hotTextColor,
							borderRadius: 6,
							alignItems: 'center',
							justifyContent: 'center',
						}}
					>
						<Text style={{ fontSize: size(28), color: '#fff', lineHeight: size(30), }}>{this.props.children}</Text>
					</TouchableOpacity>
				</View>
			</ScrollView>
		);
	}
}

export default pureRender(AddressForm)
